<template>
  <div class="app-container">
    <el-form ref="formSearch" :model="searchForm" label-width="100px">
      <el-row>
        <el-col :span="19">
          <el-row class="form_table">
            <el-col :span="8">
              <el-form-item label="文件标题" prop="fileTitle">
                <el-input v-model.trim="searchForm.fileTitle" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5" style="text-align: center">
          <el-button
            type="primary"
            @click="
              searchForm.pageNumber = 1
              getData()
            "
          >{{ $t('btn.query') }}</el-button>
          <el-button type="danger" @click="resetForm('formSearch')">{{ $t('btn.reset') }}</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-button v-permission="'gaeaExportController#export'" type="primary" icon="el-icon-download" :disabled="selectedList.length != 1" @click="downloadFile(selectedList[0])">{{ $t('btn.download') }}</el-button>
    <el-table stripe :data="tableList" border @selection-change="handleSelectionChange">
      <el-table-column fixed type="selection" width="50" center />
      <el-table-column label="文件标题" prop="fileTitle" align="center" min-width="180" />
      <el-table-column label="文件描述" align="center" min-width="300">
        <template slot-scope="scope"> 数据范围:{{ scope.row.resultStartTime }} ~ {{ scope.row.resultEndTime }}，累计{{ scope.row.resultSize }}条数据 </template>
      </el-table-column>
      <el-table-column prop="fileStatus" label="文件状态" align="center" width="100" :formatter="formatterFileStatus" />
      <el-table-column prop="fileCreateTime" label="文件创建时间" align="center" width="160" />
      <el-table-column prop="fileFinishTime" label="文件导出时间" align="center" width="160" />
      <el-table-column prop="createByView" :label="$t('businessGlossary.creator')" align="center" min-width="160" />
      <!-- <el-table-column label="操作" align="center" width="80">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="下载" placement="top">
            <el-button :circle="true" :plain="true" type="success" icon="el-icon-download" size="mini" @click="downloadFile(scope.row)" />
          </el-tooltip>
        </template>
      </el-table-column> -->
    </el-table>
    <el-pagination v-show="total > 0" background :current-page.sync="searchForm.pageNumber" :page-sizes="$pageSizeAll" :page-size="searchForm.pageSize" layout="total, prev, pager, next, jumper, sizes" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import { getList, download } from '@/api/download'
import { downloadBlob } from '@/utils'
export default {
  name: 'Download',
  data() {
    return {
      selectedList: [],
      searchForm: {
        fileTitle: null,
        pageNumber: 1,
        pageSize: 10,
      },
      tableList: [],
      total: 0,
    }
  },
  created() {
    this.getData()
  },
  methods: {
    formatterFileStatus(row) {
      // console.log(row)
      return row.fileStatus === 'success' ? '成功' : '失败'
    },
    async downloadFile(row) {
      const url = process.env.VUE_APP_BASE_API + `/business/file/download/${row.fileId}`
      window.open(url)
      // const res = await download(row.fileId)
      // if (!res) return
      // downloadBlob(res, row.fileTitle)
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.tableList = []
      this.total = 0
      this.getData()
    },
    // 查询
    async getData() {
      const params = {
        ...this.searchForm,
        sort: 'create_time',
        order: 'DESC',
      }
      const { data, code } = await getList(params)
      if (code != '200') return
      this.tableList = data.records
      this.total = data.total
    },
    // 页码改变
    handleCurrentChange(pageNumber) {
      this.searchForm.pageNumber = pageNumber
      this.getData()
    },
    // 每页size改变时
    handleSizeChange(val) {
      this.searchForm.pageNumber = 1
      this.searchForm.pageSize = val
      this.getData()
    },
    // 选择项改变时
    handleSelectionChange(val) {
      this.selectedList = val
    },
  },
}
</script>
